<template>
  <div class="swiper-container swiper" id="floor1Swiper">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="carOuSe in list"
        :key="carOuSe.id"
      >
        <img :src="carOuSe.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "Carsousel",
  props:['list'],
  // mounted() {
  //   console.log(list);
  // },
  watch:{
      list:{
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                                                //这里也可有用类选择器：.swiper
                    var mySwiper = new Swiper ('.swiper', {
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            //圆点导航按钮开启
                            clickable:true,
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    }) 
                })  
            }
        }
    }
};
</script>

<style>
</style>